<template>
<div class="main">
<el-table-header class="table-header">
  <el-button @click="refresh"><i class="el-icon-refresh el-icon--left"></i>刷新</el-button>
  <el-button @click="handleDialog()"><i class="el-icon-plus el-icon--left"></i>新增</el-button>
</el-table-header>
  <el-table
    :data="data.data"
    max-height="850"
    row-key="CategoryId"
    lazy
    empty-text="暂无数据"
    :load="load"
    :tree-props="{children: 'ChildRen', hasChildren: 'hasChildren'}">
    <el-table-column
      :prop="item.DataIndex"
      :label="item.Title"
      show-overflow-tooltip=true
      sortable
      v-for="item in data.columns" :key="item.DataIndex">
      <template #default="scope" v-if="item.DataIndex == 'Image'">
        <el-image
        style="width: 50px; height: 50px"
        :preview-src-list="[isImage(scope.row.Image.FileName)]"
        hide-on-click-modal=true
        :src=" isImage(scope.row.Image.FileName)"
        fit="fit"></el-image>
      </template>
      <template #default="scope" v-if="item.DataIndex == 'Operation'">
        <el-button
          size="mini"
          @click="handleDialog(scope.row,'edit')"><i class=" el-icon-edit el-icon-left"></i> 编辑</el-button>
          <br/>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageInfo.page"
  :page-sizes="[10, 50, 100, 200, 400]"
  :page-size="pageInfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="data.total">
</el-pagination>
  <BasicDialog
    v-model:visible="dialog.visible"
    v-if="dialog.visible"
    :formData="dialog"
    :formTitle="dialog.title"
    :data="ItemsData.data"
    @confirm="confirm"
  />
</div>
</template>
<script>
import { computed,getCurrentInstance, reactive } from 'vue';
import BasicDialog from '@/components/basic/basic-dialog'
import items from '@/components/editor/kindeditor/config/items';
import { BASE_IMAGE_URL } from '@/utils/config';
export default {
  name:"ArticleCategoryList",
  components:{
    BasicDialog
  },
  setup(){
    let { ctx } = getCurrentInstance();
    // 编辑框参数
    let ItemsData = reactive({});
    // 弹窗信息
    let dialog = reactive({
      visible:false,
      forms:[],
      title:""
    })
    // 页面数据
    let data = reactive({
      data: [],
      columns: [],
      forms: [],
    });

    let pageInfo = reactive({
      page:1,
      pageSize:10,
    })
    // 刷新页面
    function refresh(){
      getList()
    }
    // 修改每页条数
    function handleSizeChange(pageSize){
      pageInfo.pageSize = pageSize
      getList()
    }
    // 修改当前页码
    function handleCurrentChange(page){
      pageInfo.page = page
      getList()
    }
    async function getList() {
      let List = await ctx.$fetch.get('/ArticleCategory/List', pageInfo);
      let Config = await ctx.$fetch.get('/ArticleCategory/Config', {});
      data.data = List.Data.list;
      data.total = List.Data.total
      data.columns = Config.Data.Column
      data.forms = dialog.forms = Config.Data.Forms
    }
    function isImage(FileName){

        let IMAGE = BASE_IMAGE_URL + FileName
        return IMAGE
    }
    // 编辑新增弹窗
    function handleDialog(row,type = ""){
      if(type === 'edit')
      {
        dialog.title = "编辑"
        ItemsData.data = JSON.parse(JSON.stringify(row))
      }else
      {
        ItemsData.data = {}
        for (let index = 0; index < data.forms.length; index++) {
          // 新增方法去除主键(有主键会变成更新操作)
          if(data.forms[index].Type !== 'primary_key')
          {
            ItemsData.data[data.forms[index].Key]  = ""
          }
          // const element = array[index];
        }
        ItemsData.data.Select = []
      }
      dialog.visible = true
    }

    // 删除按钮
    function handleDelete(row){
        ctx.$confirm('将删除文章『'+ row.ArticleTitle +'』, 是否继续?', '删除文章', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // let param = new URLSearchParams()
          // param.append('ArticleId', row.ArticleId)
          let param = {
            CategoryId:row.CategoryId
          }
          ctx.$fetch.post('/ArticleCategory/Delete',param)
          .then(
              (response) => {
                ctx.$message.success(response.Msg)
                setTimeout(() => {
                  getList()
                }, 1000);
              },
            (err) => {
                ctx.$message.error(err.Msg)
            })
            }).catch(() => {
              ctx.$message({
                type: 'info',
                message: '已取消删除'
              });
        });
    }

    // 提交
    function confirm(){
      ctx.$fetch.get('/ArticleCategory/Save',ItemsData.data)
      .then(
        (response) => {
          ctx.$message.success(response.Msg)
            setTimeout(() => {
              getList()
          }, 1000);
        },
        (err) => {
            ctx.$message.error(err.Msg)
        }
      )
    }
    getList();

    return {
      data,
      pageInfo,
      getList,
      ItemsData,
      dialog,
      handleDialog,
      refresh,
      confirm,
      handleDelete,
      isImage,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>
<style scoped>
.main{
  padding: 20px;
}
.table-header{
  /* background: #ffffff; */
  width: 100%;
  display: block;
  /* padding: 10px; */
  text-align: left;
  margin-bottom: 4px;
}
.el-pagination{
  background-color: #ffffff;
  padding: 20px;
}
.el-button{
  margin-top: 5px;
}
</style>
